<template>
  <div>
    <div class="top-bg" >
      <div class="item">
        <div class="first mr-10">用户姓名:</div>
        <el-input placeholder="请输入用户姓名" clearable maxlength="50" v-model="params.userName"></el-input>
      </div>
      <div class="item">
        <div class="first mr-10">查询日期:</div>
        <el-date-picker type="daterange" v-model="params.dateList" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div class="item">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetClick">重置</el-button>
        <el-button @click="exportClick" :disabled="!exportBtnEnable">导出</el-button>

      </div>
    </div>
    <div class="bg">
      <el-table :data="dataList"  stripe style="width: 100%;" border :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
        <el-table-column prop="userName" label="用户姓名" ></el-table-column>
        <el-table-column prop="type" label="操作" >
          <template scope="scope">
            {{scope.row.type === 1?'充值':'扣减'}}
          </template>
        </el-table-column>
        <el-table-column prop="score" label="金额"></el-table-column>
        <el-table-column prop="actionUserName" label="操作人员"></el-table-column>
        <el-table-column prop="create_time" label="操作时间"></el-table-column>
        <el-table-column prop="scoreAfter" label="操作后金额剩余" ></el-table-column>
        <el-table-column prop="refer" label="数据来源" >
          <template scope="scope">
            {{scope.row.refer === 'order'?'订单扣减':scope.row.refer === 'charge'?'用户管理操作':scope.row.refer === 'preOrder'?'未结单':'-'}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                     :current-page="params.page" :page-sizes="[10, 20, 30, 50]" :page-size="params.pageSize"
                     :layout="params.total<10?'->,total':'->,total, sizes, prev, pager, next, jumper'" :total="params.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  ORDERING_GET_USER_INFO,
  ORDERING_GET_USERS_SCORE_LIST,
  ORDERING_POST_EXPORT_USER_SCORE_DATA
} from "@/assets/const/api";
import {Validate} from "js-utils/validate";
import {exportExcel} from "js-utils/excel";
import {getUserInfo} from "@/config/tools";

export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data () {
        return {
          dataList:[],
          params:{
            userName:'',
            dateList:[],
            pageSize:10,
            page:1,
            total:0,
          }
        }
    },
    computed: {
      exportBtnEnable(){
        return !Validate.isEmpty(this.params.dateList);
      },
      userInfo(){
        return this.$store.state.userInfo||{};
      }
    },
    watch: {},
    created() {
      this.resetData()
      this.getData()
      getUserInfo();
    },
    mounted () {},
    methods: {
      getData(){
        this.$http.get(ORDERING_GET_USERS_SCORE_LIST,this.params).then(res=>{
          if(res.code === 200){
            this.dataList = res.data.data
            this.params.total = res.data.total
          }
        })
      },
      exportClick(){
        this.$http.post(ORDERING_POST_EXPORT_USER_SCORE_DATA,this.params).then(res=>{
          if(res.code === 200){
            let data = res.data ||[]
            if (!Validate.isEmpty(data)){
              data.forEach(e=>{
                e.type = e.type === 1?'充值':'扣减';
                e.refer = e.refer ==='order'?'订单扣减':e.refer ==='order'?'用户管理操作':'';
              })
              let header = {userName:'用户姓名',type:'操作',score:'金额',actionUserName:'操作人员',create_time:'操作时间',scoreAfter:'操作后金额剩余',refer:'数据来源'}
              exportExcel(data, header, this.params.userName+'金额导出' , "xlsx");
            }else{
              this.$message.error('数据为空');
            }
          }
        })
      },
      handleSearch(){
        this.params.page = 1
        this.getData()
      },
      resetClick(){
        this.resetData()
        this.getData()
      },
      handleCurrentChange(val){
        this.params.page = val
        this.getData()
      },
      handleSizeChange(val){
        this.params.pageSize = val
        this.getData()
      },
      resetData(){
        this.params.userName = ''
        let todayDate = new Date()
        let sevenDaysAgo = new Date(todayDate);
        sevenDaysAgo.setDate(todayDate.getDate() - 7);
        let today = this.date2String(todayDate)
        let seven = this.date2String(sevenDaysAgo)
        this.params.dateList = [seven,today]
      },
      date2String(nowDate) {
        let year = nowDate.getFullYear()
        let month = nowDate.getMonth() + 1
        let day = nowDate.getDate()
        if (month < 10) month = '0' + month
        if (day < 10) day = '0' + day
        return year + '-' + month + '-' +day
      },
    }
}
</script>

<style scoped lang="scss">
.bg{
  background-color: white;
  padding: 20px;
}
.top-bg{
  background-color: #f9f9f9;
  border: 1px solid #ebeef5;
  min-height: 60px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  padding: 18px 0 0;
  display: flex;
  align-items: center;
  .item{
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 18px;
    flex-shrink: 0;

  }
  .first{
    min-width: 100px;
    text-align: right;
  }
}
</style>